<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv ="Content-Type" content ="text/html" charset ="utf-8" />
	<title> Shuffling  figure 轮播图</title>
	<link rel ="shortcut icon" href ="icons/pandao.ico" />
	<link rel ="stylesheet" type ="text/css" src ="">
	<link type ="text/javascript" href ="">
	<style rel ="stylesheet" type ="text/css">
	body{
		background-color:rgba(132,132,150,0.5);
	}
	body, div, a, img{
		margin:0;
		padding:0;
	}
	.hdpoi{
		position:absolute;
		height:356px;
		top:0;right:0px;
		bottom:0;left:0;
		margin:auto;
	}
	.posi{
		position:relative;
		width:500px;
		height:354px;
		margin:0 auto;
		overflow:hidden;
	}
	.posi .imgbox{
		width:2500px;
		height:100%;
		transition:transform 2s;
	}
	.posi .imgbox img{
		display:block;
		float:left;
	}
	.posi .button{
		position:absolute;
		right:0;
		bottom:10px;left:0;
		width:42%;
		height:14px;
		margin:0 auto;
		background-color:rgba(0,0,0,0.2);
		border-radius:10px;
	}
	.posi .button span{
		display:block;
		float:left;
		margin:1px 15px;
		width:10px;
		height:10px;
		border:1px solid #fff;
		border-radius:50%;
		transition:width 0.5s;
	}
	.posi .button .spbg{
		background-color:#f60;
	}
	.hdpoi .posi a{
		display:block;
		position:absolute;
		top:0;
		bottom:0;
		width:40px;
		height:64px;
		margin:auto;
		text-decoration:none;	
	}
	.hdpoi .posi a:hover{
		background-color:#bfcfec8c;
	}
	.hdpoi .posi .rit{
		right:0;
	}
	.posi .button .spbg{
		background-color:#f60;
	}
	</style>
</head>
<body>
	<div class ="hdpoi">
		<div class ="posi" id ="omver">
			<div class ="imgbox" id ="melth">
				<img alt ="" src ="images/1.jpg" />
				<img alt ="" src ="images/2.jpg" />
				<img alt ="" src ="images/3.jpg" />
				<img alt ="" src ="images/4.jpg" />
				<img alt ="" src ="images/5.jpg" />
			</div>
			<div class ="button" id ="omsdn">
					<span class ="spbg"></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
			</div>
			<a id ="aleft" href ="#"></a>
			<a id ="aright" class ="rit" href ="#"></a>
		</div>
	<div>
	<script type ="text/javascript">
		var onver = document.getElementById("omver");
		var molgh = document.getElementById("melth");
		var lftbg = document.getElementById("aleft");
		var rgtbg = document.getElementById("aright");
		var spb = document.getElementsByTagName("span");
		var osn = document.getElementById("omsdn");
		var i = 0,z,t;
		start();
		function start(){
			t =setInterval(autom,4000);
		}
		function autom(){
			if (i == 2000){
				i = -500; 
			}
			i += 500;
			molgh.style.transform ="translateX(" + (-i) + "px)";
			z = i / 500;
			spg(z);
		}
		//清除样式
		function spg(z){
			for (var j = 0;j < spb.length;j++){
				if (j == z){
					spb[j].className = "spbg";
				}
				else{
					spb[j].className ="";
				}
			}
			return z;
		}
		//设置左右箭头样式;
		onver.onmouseover =function (){
			clearTimeout(t);
			lftbg.style.backgroundImage ="url(images/lfta.png)";
			rgtbg.style.backgroundImage ="url(images/rita.png)";
		}
		onver.onmouseout =function (){
			start();
			lftbg.style.backgroundImage ="";
			rgtbg.style.backgroundImage ="";
		}
		//左右箭头点击事件
		lftbg.onmousedown =function (){
			if (i == 2000){
				i = -500; 
			}
			i += 500;
			molgh.style.transform ="translateX(" + -i + "px)";
			z = i / 500;
			spg(z);
			return z;
		}
		rgtbg.onmousedown =function (){	
			if (i == 0){
				i = 2500;
			}
			i -= 500;
			molgh.style.transform ="translateX(" + (-i) + "px)";
			z = i / 500;
			spg(z);
			return z;
		}
		//鼠标点击原点事件
		for (var m = 0; m < spb.length;m++){
			(function (m){
				spb[m].onclick = function (){
					i = m * 500;
					spb[m].className = "spbg";
					spg(m);
					molgh.style.transform ="translateX(" + (-i) + "px)";
				}
			})(m);
		}
	</script>
</body>
</html>